<!DOCTYPE html>
<html>
<head>
    <title>Canvas Plugin Example</title>
    <link rel="stylesheet" href="./leaflet/leaflet.css"/>
    <style>
        #map {
            height: 800px;
        }
    </style>
</head>
<body>
<div id="map"></div>
<script src="./leaflet/leaflet.js"></script>
<script src="./dist/leaflet.canvasline.js"></script>
<script src="config.js"></script>
<script>

  // 初始化地图
  let newLayers = [];
  for (let i = 0; i < config.imageLayerUrl.length; i++) {
    newLayers.push(L.tileLayer(config.imageLayerUrl[i], {tms: false}));
  }
  var map = new L.map('map', {
    center: new L.LatLng(35.8617, 104.1954),
    zoom: 7,
    minZoom: 3,
    maxZoom: 21,
    layers: newLayers,
  });
  // 创建自定义的Canvas图层并添加到地图上
  var customLayer = L.canvasLine();
  customLayer.addTo(map);
  // 示例代码：添加线段
  var coordinates1 = [
    L.latLng(34.1222, 108.2222),
    L.latLng(31.3516, 102.9398),
    L.latLng(32.3, 106.9),
  ];
  customLayer.addLine('layerId1', {
    data: coordinates1,
    color: 'blue',
    weight: 2,
  });
  var coordinates2 = [
    L.latLng(34, 101.2222),
    L.latLng(28, 101.298),
    L.latLng(31.3, 106.9),
  ];
  customLayer.addLine('layerId2', {
    data: coordinates2,
    color: 'blue',
    weight: 2,
  });

  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  setInterval(() => {
    coordinates1 = [
      L.latLng(34 + Math.random() * 1.8, 108 + Math.random() * 1.8),
    ];
    customLayer.updateLineData('layerId1', coordinates1);
    customLayer.updateLineStyle('layerId1', {
      color: getRandomColor(),
    });
  }, 1000);
</script>
</body>
</html>
